<template>
  <div class="news-box">
    <el-card class="table-card">
      <template #header>
        <el-button @click="addLists()" size="large" icon="Plus">添加员工</el-button>
      </template>
    </el-card>
    <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
      <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center"> </el-table-column>

      <el-table-column prop="username" label="员工名称" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="phone" label="员工电话" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="yuangongText" label="员工权限" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="shangpinText" label="商品权限" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="dingdanText" label="订单权限" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="jinqianText" label="金钱权限" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="huiyuanText" label="会员权限" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="shezhiText" label="设置权限" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="tongjiText" label="统计权限" align="center" header-align="center"> </el-table-column>

      <el-table-column prop="cangkuText" label="仓库权限" align="center" header-align="center">
        <template #default="scope">
          <div class="tag-container" style="display: flex; flex-wrap: wrap">
            <Tag v-for="(item, index) in scope.row.cangkuText" :text="item" />
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="moren" label="是否默认" align="center" header-align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.shangpin" @change="changeShangPin(scope.row.id)" />
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center" header-align="center" width="160px">
        <template #default="scope">
          <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon">
            <Edit />
          </el-icon>

          <el-icon @click.stop="deleteFun(scope.row.id)" class="lists-delete-icon">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 20px; overflow: hidden">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        @prev-click="handlePrev" @next-click="handleNext" :current-page="pageNum" :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
      </el-pagination>
    </div>
    <!-- 添加编辑文章类型 -->
    <addEdit :show="showAddEdit" :addEditData="addEditData" :status="addEditStatus" @hide-addEdit="hideAddEdit" />
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getServerUserList, deleteServerUser } from '@api/person'
import addEdit from './components/addEdit.vue'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/pinia/user'
import { ElMessage } from 'element-plus'
import { getAllCangkuList } from '@api/cangku'
import Tag from '@components/common/Tag/main.vue'

const userStore = useUserStore()

const router = useRouter()

// *********************************************列表
const lists = ref([])

//获取列表
const cangku = ref([])
async function getLists() {
  let res = await getServerUserList()
  let res2 = await getAllCangkuList()
  cangku.value = res2.data

  if (res.code == 200) {
    lists.value = res.data.map((v) => {
      return {
        ...v,
        shangpinText: v.shangpin == '0' ? '否' : '是',
        yuangongText: v.yuangong == '0' ? '否' : '是',
        dingdanText: v.dingdan == '0' ? '否' : '是',
        jinqianText: v.jinqian == '0' ? '否' : '是',
        huiyuanText: v.huiyuan == '0' ? '否' : '是',
        shezhiText: v.shezhi == '0' ? '否' : '是',
        tongjiText: v.tongji == '0' ? '否' : '是',
        cangkuText: formatterCangku(v.cangku)
      }
    })
  }
}

// 格式化仓库名称
const formatterCangku = (data) => {
  if (!data) {
    return ''
  }
  data = data.split(',')
  let cangkuText = []
  cangku.value.forEach((v, i, arr) => {
    data.forEach((v2, i2, arr2) => {
      if (v2 == v.id) {
        cangkuText.push(v.name)
      }
    })
  })

  return cangkuText
}

// *********************************************添加编辑
const showAddEdit = ref(false) //显示隐藏弹框
const addEditStatus = ref('add') //添加编辑状态
const addEditData = ref({
  id: '',
  username: [],
  phone: ''
})

//添加文章
function addLists() {
  addEditData.value.username = ''
  addEditData.value.phone = ''
  addEditStatus.value = 'add'
  showAddEdit.value = true
}

//添加编辑文章回调
function hideAddEdit(type) {
  showAddEdit.value = false
  if (type != 'cancel') {
    getLists()
  }
}

//编辑文章
function editFun(item) {
  addEditData.value.id = item.id
  addEditData.value.username = item.username
  addEditData.value.phone = item.phone
  addEditData.value.password = item.password
  addEditData.value.yuangong = item.yuangong == '0' ? false : true
  addEditData.value.shangpin = item.shangpin == '0' ? false : true
  addEditData.value.dingdan = item.dingdan == '0' ? false : true
  addEditData.value.jinqian = item.jinqian == '0' ? false : true
  addEditData.value.huiyuan = item.huiyuan == '0' ? false : true
  addEditData.value.shezhi = item.shezhi == '0' ? false : true
  addEditData.value.tongji = item.tongji == '0' ? false : true
  addEditData.value.cangku = item.cangku == '' ? [] : item.cangku.split(',')
  addEditStatus.value = 'edit'
  showAddEdit.value = true
}

//删除文章
function deleteFun(id, index) {
  ElMessageBox.confirm('确定删除员工?')
    .then(async () => {
      let res = await deleteServerUser({ id })
      if (res.code == 200) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })
        getLists()
      }
    })
    .catch(() => { })
}

//查看详情
function rowCli(item, column) {
  // router.push({ path: '/home/news/detail', query: { id: row.id } })
  addEditData.value.id = item.id
  addEditData.value.username = item.username
  addEditData.value.phone = item.phone
  addEditStatus.value = 'read'
  // showAddEdit.value = true
}

onMounted(() => {
  getLists()
})
</script>
<style lang="scss" scoped>
.news-box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;

  .left-right-box {
    position: absolute;
    top: 172px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-box {
      height: 100%;
      width: 230px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 50px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      position: relative;
      overflow-y: auto;
      border-radius: 4px;
      margin-right: 20px;

      .title {
        font-size: 14px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;

        .icon {
          float: right;
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .left-lists {
        font-size: 12px;
        padding: 8px 17px;
        color: #636363;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        position: relative;

        .name {
          float: left;
        }

        .input-name {
          width: 90px;
          float: left;
          padding: 0;

          .el-input__inner {
            padding: 0 10px;
          }
        }

        .option {
          float: right;
        }
      }
    }

    .left-lists.active {
      color: #4c9ff2 !important;
      background-color: #f5f5f5;
    }

    .right-box {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
